<!-- 模型树数据 -->
<template>
  <div class="type-tree">
    <div class="page-title">
      <span class="page-title-text">字典分类</span>
      <div>
        <el-button type="primary" size="small" @click="addType">
          新增分类
        </el-button>
      </div>
    </div>
    <div class="tree-search">
      <el-input
        v-model="filterText"
        size="small"
        placeholder="请输入过滤关键词"
        @input="filterTree"
        style="margin-bottom: 10px"
      ></el-input>
    </div>
    <div class="tree-container">
      <el-tree
        ref="treeRef"
        class="tree-list filter-tree tree-scrollbar"
        node-key="id"
        :data="treeData"
        :props="defaultProps"
        draggable
        :default-expand-all="false"
        render-after-expand
        auto-expand-parent
        :highlight-current="true"
        :filter-node-method="filterMethod"
        :expand-on-click-node="true"
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span class="node-left">
              <span class="node-label" :title="node.label">
                {{ node.label }}
              </span>
            </span>

            <span class="node-right">
              <el-dropdown size="small" @command="handleParamsCommand">
                <i class="el-icon-more"></i>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{ command: 'editDict', data }">
                      编辑
                    </el-dropdown-item>
                    <el-dropdown-item :command="{ command: 'delDict', data }">
                      删除
                    </el-dropdown-item>
                    <el-dropdown-item
                      :command="{ command: 'changeStatus', data }"
                    >
                      {{ data.enableState ? "启用" : "禁用" }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </span>
          </span>
        </template>
      </el-tree>
    </div>
    <OperaDialog ref="operaDialogRef" @reload="reloadTree" />
  </div>
</template>
<script>
import OperaDialog from "./treeComponents/OperaDialog.vue";
export default {
  name: "TypeTree",
  components: {
    OperaDialog,
  },
  data() {
    return {
      filterText: null,
      // 树数据
      treeData: [],
      defaultProps: {
        label: "name",
        children: "childList",
      },
      // 当前选择节点的详细数据
      curItem: {},
    };
  },
  created() {
    this.getDictData();
  },
  methods: {
    // 获取数据库信息
    getDictData() {
      this.$axios
        .post(this.$api.dataConnection.dataDictionary.getDictList, {
          name: null,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.treeData = res.data.data?.list || [];
          }
        });
    },
    reloadTree() {
      this.getDictData();
    },
    // 新增模型
    addType() {
      this.$refs.operaDialogRef.openDialog();
    },
    // 处理下拉操作
    handleParamsCommand(info) {
      const command = this[info.command];
      if (typeof command === "function") {
        command.call(this, info.data);
      }
    },
    filterTree(val) {
      this.$refs.treeRef.filter(val);
    },
    // 过滤方法
    filterMethod(value, data) {
      return data.name?.includes(value);
    },
    // 点击节点
    handleNodeClick(data) {
      this.curItem = data;
      this.$emit("select-dict", this.curItem);
    },
    // 编辑表
    editDict(data) {
      this.$refs.operaDialogRef.openDialog(data);
    },
    // 删除表
    delDict(data) {
      this.$confirm("确定删除此字典数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get(this.$api.dataConnection.dataDictionary.deleteDictionary, {
              params: { id: data.id },
            })
            .then((res) => {
              if (res.data.code === 200) {
                this.$message.success(res.data.message);
                this.$refs.treeRef.remove(data);
                // 如果当前选中了被删除的模型 则需要置空选择项
                if (this.curItem.id === data.id) {
                  this.curItem = {};
                  this.$emit("select-dict", this.curItem);
                }
              } else {
                this.$message.warning(res.data.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 启用禁用
    changeStatus(data) {
      this.$confirm(
        `是否确认${data.enableState === 0 ? "禁用" : "启用"}该名称？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$axios
            .post(this.$api.dataConnection.dataDictionary.enableDictionary, {
              id: data.id,
              enableStatus: Number(data.enableState),
            })
            .then((res) => {
              if (res.data.code === 200) {
                this.$message.success(res.data.message);
                this.reloadTree();
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.type-tree {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 20px;
  background-color: #fff;
}
.page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .page-title-text {
    border-left: 5px solid $--color-primary;
    padding-left: 10px;
    margin: 8px 0;
    font-size: 16px;
    line-height: 16px;
  }
}

.tree-container {
  flex: 1;
  padding: 10px 0;
  overflow-y: auto;
}

.custom-tree-node {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  .node-left {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    .node-label {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .node-icon {
    margin-right: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .node-right {
    opacity: 0;
    margin: 0 10px;
  }
  &:hover .node-right {
    opacity: 1;
  }
  &:hover span {
    color: $--color-primary;
  }
}
</style>
